<template>
  <div class="watch">
    Watch的使用
    <div>{{ name }}---{{ age }}</div>
    <button @click="changeName">该变name</button>
    <button @click="changeAge">该变age</button>
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { watchEffect, ref } from 'vue'
export default {
  setup () {
    const name = ref('why')
    const age = ref(18)
    // eslint-disable-next-line no-return-assign
    const stop = watchEffect((aaaa) => {
      const timer = setTimeout(() => {
        console.log('网络请求成功')
      }, 2000)
      aaaa(() => {
        // 在这个函数内部清除副作用
        // request.cancel()
        clearTimeout(timer)
        console.log('aaaaa')
      })
      console.log('name', name.value, 'age', age.value)
    })
    // eslint-disable-next-line no-return-assign
    const changeName = () => name.value = 'jixiao'
    const changeAge = () => {
      age.value++
      if (age.value > 25) {
        stop()
      }
    }
    return {
      name,
      age,
      changeName,
      changeAge
    }
  }
}
</script>
<style scoped>
</style>
